import React, { useEffect } from 'react'
import { Form, Input, Button, Row, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { withRouter } from "react-router-dom";
import loginService from "../service/login/loginService"
import { getToken, setToken } from "../utils/tools"
import { useSelector, useDispatch } from 'react-redux';
import { setTicket } from "../reducer/CASLogin"
function Login(this: any, props: any) {
    const dispatch = useDispatch()
    const ticket = useSelector((state: any) => state.CASLogin.ticket)
    const gotoCASlogin = async (ticket: string = "") => {
        if (!ticket) {
            let data = await loginService.getLogin({ ticket })
            if (data.login_url) {
                window.location.href = data.login_url
            } else {
                message.error("跳转失败")
            }

        } else {
            let { token } = await loginService.getLogin({ ticket })
            if (token) {
                setToken(token)
                props.history.push("/parseList")
            } else {
                message.error("登陆失败")
            }
        }

    }
    useEffect(() => {
        //有Token值？直接跳转到解析结果列表
        if (getToken()) {
            props.history.push("/parseList")
        } else {


            //没有token？看是否有ticket
            if (!ticket) {
                //看地址是否有ticket
                let url = document.location.href;
                if (/ticket=(ST-[^#/?]+)/.test(url)) {
                    let ticket = (/ticket=(ST-[^#/?]+)/.exec(url) as unknown as RegExpExecArray)[1]
                    //地址中有ticket
                    dispatch(setTicket(ticket))
                    gotoCASlogin(ticket)
                } else {
                    //地址也没有ticket 跳转到cas登陆
                    //  gotoCASlogin()
                }

            } else {
                gotoCASlogin(ticket)
            }
        }


        //没有ticket？访问CAS登陆获取ticket

        // gotoCASlogin()
        // if (getToken()) {
        //     let query = props.location.search;
        //     // ?redirect=/home
        //     let redirect = query.substring(10);
        //     console.log(redirect);

        //     // this.props.history.push(redirect);
        // } else {
        //     let query = props.location.search;
        //     // ?redirect=/home
        //     console.log(query);

        //     let redirect = query.substring(10);
        //     console.log(redirect);

        // }
    }, [])
    //注册
    const register = () => {
        props.history.push('/register')
    }
    //微信登陆
    const goToWxLogin = () => {
        props.history.push('/wxLogin')
    }
    //重置密码
    const gotoRest = () => {
        props.history.push('/reset')
    }
    //提交密码验证
    const handleLogin = (value: any) => {
        console.log(value);

    }
    const onFinish = (values: any) => {
        handleLogin(values)

    }
    const onFinishFailed = (errorInfo: any) => {
        console.log('onFinishFailed Failed:', errorInfo);
    }

    return (
        <div>
            <Row className="page_form" justify="center" align="middle">
                <Form name="basic"
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item>
                        <Input placeholder="请输入用户名" />
                    </Form.Item>
                    {/* <Form.Item name="mobile" rules={[
                        ({ getFieldValue }) => ({
                            validator(rule, value) {
                                if (!value) {
                                    return Promise.reject('请输入手机号!')
                                }
                                if (value && /^1[3456789]\d{9}$/.test(value)) {
                                    return Promise.resolve()
                                }
                                return Promise.reject('请输入正确的手机号')
                            }
                        })
                    ]}>
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入手机号码" />
                    </Form.Item> */}
                    <Form.Item name="password" rules={[{ required: true, message: '请输入密码!' }]} >
                        <Input type="password" prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入密码" />
                    </Form.Item>
                    <Form.Item>
                        <Button className="submit_btn" type="primary" htmlType="submit">登录</Button>
                    </Form.Item>
                    <Row align="middle" style={{ height: '32px' }}>
                        <span className="txt_btn"
                            onClick={gotoRest}
                            style={{ marginRight: '20px' }}>忘记密码?</span>
                        <span className="txt_btn"
                            onClick={goToWxLogin}
                        >微信登陆</span>
                    </Row>
                    <Row style={{ height: '32px' }}>
                        <span>如您没有账户, 请</span>
                        <span className="txt_btn"
                            onClick={register}
                        >注册</span>
                    </Row>
                </Form>
            </Row>
        </div>
    )
}
export default withRouter(Login)